<template>
  <ul>
    <li v-for="item in navData" @click="navPage(item.path)" :key="item.id">{{item.name}}</li>
  </ul>
</template>

<script>
export default {
  name: "navList",
  components: {},
  data() {
    return {
      navData: []
    };
  },
  created() {
    let data = [
      { id: 1, name: "餐桌管理", path: "/餐桌管理xx" },
      { id: 2, name: "菜品管理", path: "/菜品管理xx" },
      { id: 3, name: "点菜管理", path: "/点菜管理xx" },
      { id: 4, name: "会员管理", path: "/会员管理xx" },
      { id: 5, name: "收银", path: "/收银xx" },
      { id: 6, name: "人员管理", path: "/人员管理xx" }
    ];
    let navData = data.map(item => {
      item.path = "/home" + item.path;
      return item;
    });
    this.navData = navData;
  },
  methods: {
    navPage(url) {
      this.$router.push(url);
    }
  }
};
</script>
<style scoped lang="less">
ul {
  margin: 0;
  padding: 0;
  width: 100%;
  li {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    border: 1px solid red;
    box-sizing: border-box;
    cursor: pointer;
  }
}
</style>